<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/jquery.jqzoom.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".jqzoom").jqueryzoom({
				xzoom: 250, 		//zooming div default width(default width value is 200)
				yzoom: 250, 		//zooming div default width(default height value is 200)
				offset: 10, 		//zooming div default offset(default offset value is 10)
				position: "right" 	//zooming div position(default position value is "right")
			});
		});
	</script>
	<link rel="stylesheet" href="../css/jqzoom.css" type="text/css"/>
	
	<style type="text/css">
	*{
		margin:0px;
		padding:0px;
	}
	.top{
		width:100%; 
		height:35px; 
		line-height:35px; 
		font-size:12px;	
	}
	.top ul li{
		list-style:none;
		float:right;
		width:60px;
	}
	a{
		color:#06F;
		text-decoration:none;
	}
	a:hover{
		text-decoration:underline;
	}
	.show{
		display:block;
	}
	.hidden{
		display:none;
	}
	.show ul li{
		height:26px;
		line-height:26px;
		background:#FFF;
		padding-left:40px;
		font-size:13px;
		list-style: none;
	}
	.show ul li:hover{
		background:#EFEFEF;
	}
	.show ul li a{
		text-decoration: none;
	}
	.manager_nav{
		height:38px;
		color:#FFF;
		font-size:13px;
		font-weight:bold;
		line-height:36px;
		padding-left:12px;
		border-bottom:1px dashed #333;
	}
	table tr{
		height: 32px;
	}
	#large{
		position:absolute;	
		z-index:999;
	}
	</style>
</head>

<body>
	<div style="height:35px;;width:100%;border-bottom:1px solid #CCC; z-index:-1; position:absolute; background:#EFEFEF;"></div>
	<div style="width:1200px; margin:auto;">
        <!-- 顶部索引 -->
        <div class="top">
        	<div style="width:50%; float:left;">你好！欢迎进入中国报案网。</div>
            <div style="width:50%; float:right; text-align:right;">
				<jsp:include page="top2.jsp"></jsp:include>
            </div>
        </div>
        <!-- 主体内容 -->
        <div style="width:100%; height:560px;  font-family: '微软雅黑';">
            <div style="width: 1100px; height:530px; border:1px solid #406BDD; border-radius:10px; margin:38px 60px;">   
            	<!-- 左边菜单栏 -->
            	<div style="width:20%; height:100%; background:#406BDD; float:left; border-top-left-radius:10px; border-bottom-left-radius:10px;">         		       
            		<jsp:include page="left.jsp"></jsp:include>
            	</div>
            	<div style="width:80%; float:left; background:#EFEFEF; height:100%; border-top-right-radius:10px; border-bottom-right-radius:10px;">    
					<div style="width:95%; height:50px; background:#FFF; margin:6px auto; border:1px solid #888;"></div>
					<div style="margin:10px auto; background:#FFF; width:95%; border:1px solid #888;">
						<!-- 案件详情信息 -->
						<table border="0px" align="center" width="100%">
							<tr>
								<td colspan="4">&nbsp;案件编号：${case.cid }</td>
							</tr>
	
							<tr>
								<td align="right" width="20%">报险人：</td>
								<td width="30%">
									&nbsp;${case.customer.cname }
								</td>
								<td align="right" width="20%">接案人员：</td>
								<td width="30%">
									&nbsp;${case.manager.smname }								
								</td>
							</tr>
							<tr >
								<td align="right">身份证：</td>
								<td>
									&nbsp;${case.customer.cidcard }
								</td>
								<td align="right">车牌号码：</td>
								<td>
									&nbsp;${case.car.cno }
								</td>
							</tr>
							<tr>
								<td align="right">车架号：</td>
								<td>
									&nbsp;${case.car.cvin }
								</td>
								<td align="right">发动机号：</td>
								<td>
									&nbsp;${case.car.cengine }
								</td>
							</tr>
							<tr>
								<td align="right">手机号码：</td>
								<td>
									&nbsp;${case.cphone }
								</td>
								<td align="right">报险类型：</td>
								<td>
									&nbsp;${case.casetype.ctname }
								</td>
							</tr>
							<tr>
								<td align="right">报险地点：</td>
								<td>
									&nbsp;${case.caddress }
								</td>
								<td align="right">报险时间：</td>
								<td>
									&nbsp;${case.cdate }
								</td>
							</tr>
							<tr id="body">
								<td align="right">图片：</td>
								<td colspan="3">
									<s:iterator value="#request.case.prcs" var="prc">													
										<div style="float:left; width:135px; height:120px;">
											<div class="jqzoom"  style="margin-right:5px; float:left;">
												<img src="<s:property value='#prc.purl'/>" width="100px" height="100px" jqimg="<s:property value='#prc.purl'/>">
											</div>	
											<div style="text-align: center; font-size:10px; float:left;"><s:property value='#prc.pname'/></div>
										</div>
									</s:iterator>				
								</td>
							</tr>
							<tr >
								<td height="60px" align="right">备注：</td>
								<td colspan="3">
									&nbsp;${case.cdesc }
								</td>
							</tr>
							<tr>
								<td colspan="4" height="60px" align="center">
									<a href="javascript:history.go(-1)"><button style="width: 120px; height: 38px; background: #406BDD; border: none; color: #FFF; font-size: 16px;">返回</button></a>
								</td>
							</tr>
						</table>					
					</div>
				</div> 
            </div>
        </div>
        <!-- 版权 -->
        <div style="width:100%; height:30px; text-align:center; line-height:30px; float:left; font-size:14px;">Copyright© 中国报案网 2007-2015，All Rights Reserved</div>
    </div>
    <script type="text/javascript">
   		//实现鼠标放到图片上，展现另外一个层显示图片
		var la = $("#large");
		la.hide();
	
		function movePrc(obj){
			$("#" + obj.id + "").mousemove(function(e){
				la.css({
					top : e.pageY,
					left : e.pageX
				}).html('<img src = "' + this.src + '" width="460px" height="380px"/>').show();
			}).mouseout(function(){
				la.hide();
			});
		}
    </script>
</body>
</html>
